<!-- 历史数据 -->
<template>
  <div class="history-data">
    <div class="header">
      <el-form
        class="-mb-15px"
        ref="queryFormRef"
        :inline="true"
        label-width="auto"
      >
        <el-form-item label="选择时间" prop="deviceId">
          <el-date-picker
            v-model="dateScope"
            value-format="YYYY-MM-DD HH:mm:ss"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          />
        </el-form-item>
      </el-form>
      <div>
        <el-button type="primary" @click="search">查询</el-button>
        <el-button type="info" @click="reset">重置</el-button>
        <!-- <el-button type="primary" @click="exportExcel">导出</el-button> -->
      </div>
    </div>
    <div class="history-table">
      <el-table
        :data="tableData"
        v-loading="loading"
        border
        style="width: 100%"
        :header-cell-style="{background:'#eef1f6',color:'#606266'}"
      >
        <el-table-column
          label="采集时间"
          align="center"
          prop="msgTime"
          width="180px"
        >
          <template #default="{row}">
            <span>{{ formatDate(row.msgTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column v-for="(item, index) in deviceList" :key="index" :label="item.name" align="center" prop="vacuumDeviceInfos">
          <template #default="{ row }">
            {{ row.vacuumDeviceInfos[index].value }}
          </template>
        </el-table-column>
      </el-table>
    </div>
    <Pagination
      style="margin-top: 32px;"
      :total="page.total"
      v-model:page="page.pageNo"
      v-model:limit="page.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script setup lang="ts">
import { listByDevice, pageDeviceMessage } from '@/api/vs/vacuumdeviceattr/index'
import dayjs from 'dayjs';

const props = defineProps({
  deviceId: {
    type: Number,
    default: null
  }
})

// 选中的日期范围
const dateScope = ref([])

// 分页数据
const page = ref({
  total: 0,
  pageNo: 1,
  pageSize: 10
})

// 表格数据
const tableData = ref([])

// 表格加载中状态
const loading = ref(false)

// 日期格式化
const formatDate = (val) => {
  return dayjs(val).format('YYYY-MM-DD HH:mm:ss')
}

// 点击查询按钮触发
const search = () => {
  getList()
}

// 点击重置按钮触发
const reset = () => {
  dateScope.value = []
  getList()
}

// 点击导出按钮触发
// const exportExcel = () => {}

// 获取界面数据
const getList = () => {
  loadListByDevice()
  loadPageDeviceMessage()
}

// 属性列表
const deviceList = ref([])
// 根据设备获取属性列表
const loadListByDevice = async () => {
  try {
    const res = await listByDevice(props.deviceId)
    deviceList.value = res
  } catch (error) {
    console.log(error)    
  }
}

onMounted(loadListByDevice)

// 获取设备信息分页
const loadPageDeviceMessage = async () => {
  loading.value = true
  try {
    const params = {
      pageNo: page.value.pageNo,
      pageSize: page.value.pageSize,
      msgTime: dateScope.value,
      deviceId: props.deviceId
    }
    const res = await pageDeviceMessage(params)
    tableData.value = res.list
    page.value.total = res.total
    loading.value = false
  } catch (error) {
    loading.value = false
    console.log(error)
  }
}

onMounted(loadPageDeviceMessage)
</script>

<style scoped lang="scss">
.history-data {
  padding: 12px;
  margin-top: 16px;
  background-color: #fff;
  border-radius: 8px;

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .history-table {
    margin-top: 16px;
  }
}
</style>